<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h3>会过期的本地存储</h3>
  <button class="save">存数据</button>
  <button class="get">去数据</button>
  <script>
    // 存的时候把存的时间戳也存进去
    // 取的时候，将取的时候的时间戳和存的时间戳比较
    // 大于范围，删除存的内容
    // 小于范围，取出内容
    document.querySelector(".save").onclick = () => {
      localStorage.setItem(
        "name",
        JSON.stringify({value: "zhangsan", time: new Date().getTime()})
      )
    }

    document.querySelector(".get").onclick = () => {
      const name = localStorage.getItem("name");
      if (name) {
        const obj = JSON.parse(name);
        const getTime = new Date().getTime();
        if (getTime - obj.time > 1000 * 60) {
          localStorage.removeItem("name");
        } else {
          console.log(obj.value);
        }
      }
      
    }
  </script>
</body>
</html>